<template>
  <div class="index">
     <!-- 卡片 -->
    <div class="h-card">
      <div class="h-secoed-line"  @click="$router.push('/shopMng')">
          <div class="line-title flex1">设备总数   <countup :end-val="pageData.devices" :duration="3" :decimals="0" class="second-num"></countup>
          </div>
         <div class="line-title flex1">店铺总数   <countup :end-val="pageData.stores" :duration="3" :decimals="0" class="second-num"></countup>
          </div>
          <div class="isclick marginleft35"></div>
      </div>
        <div class="h-first-line">
            <div class="line-item">
                <div class="line-data"><countup :end-val="pageData.total" :duration="2" :decimals="2" ></countup></div>
                <div class="line-title">总销售额(元)</div>
            </div>
            <div class="line-item">
                <div class="line-data"><countup :end-val="pageData.month" :duration="2" :decimals="2" ></countup></div>
                <div class="line-title">本月销售额(元)</div>
            </div>
            <div class="line-item top30">
                <div class="line-data"><countup :end-val="pageData.purchaseTotal" :duration="2" :decimals="2" ></countup></div>
                <div class="line-title">总采购(元)</div>
            </div>
            <div class="line-item top30">
                <div class="line-data"><countup :end-val="pageData.purchaseMonth" :duration="2" :decimals="2" ></countup></div>
                <div class="line-title">本月总采购(元)</div>
            </div>
        </div>
        
    </div>
    <!-- 卡片 -->
    <!-- 简报-->
    <div class="jb-box">
      <div class="bulletin-title">今日简报</div>
      <div class="data-box">
          <div class="data-item">
            <div class="data-item-num"><span class="symbol">￥</span><countup :end-val="pageData.today" :duration="2" :decimals="2" ></countup></div>
            <div class="data-item-title">今日销售(<span class="strong">{{pageData.todayOrders}}</span>份)</div>
            <div class="data-item-title">今日烹饪订单(<span class="strong">{{pageData.todayCookOrder}}</span>份)</div>
          </div>
          <div class="data-item">
            <div class="data-item-num"><span class="symbol">￥</span><countup :end-val="pageData.yesterday" :duration="2" :decimals="2" ></countup></div>
            <div class="data-item-title">昨日销售(<span class="strong">{{pageData.yesterdayOrders}}</span>份)</div>
            <div class="data-item-title">昨日烹饪订单(<span class="strong">{{pageData.yesterdayCookOrder}}</span>份)</div>
          </div>
      </div>
    </div> 
    <div class="kucun-box isbtn" @click="$router.push('/stockIndex')">
      <div class="kuncun-text">当前库存</div>
      <div class="kuncun-num-box">
        <div class="">{{pageData.totalStock}}</div>
        <div class="isclick"></div>
      </div>
    </div>
    <!-- rowbox -->
    <div class="row-box">
      <row isclick title="店铺销售排行统计" @click.native="$router.push('/shopSaleRanking')"> </row>
      <row isclick title="商品销售排行统计" @click.native="$router.push('/goodssaleRanking')"> </row>
      <!-- <row isclick title="采购订单统计"  @click.native="$router.push('/purchasingStatistics')"> </row> -->
      <row isclick title="库存日报表"  @click.native="$router.push('/shopStockDailyData')"> </row>
      <row isclick title="店铺运营报表" @click.native="$router.push('/shopOperateDailyData')"> </row>
    </div>
  </div>
</template>

<script>
import api from '@/api/api.js'
import util from '@/utils/util.js'
import row from '@/components/row'
export default {
  components: {
    row
  },
  data () {
    return { 
      pageData:{
        devices:0,
        total:1000,
        month:100,
        today:89,
        yesterday:100,
        stores:0,
        todayOrders:0,
        yesterdayOrders: 0,
        purchaseTotal:'',
        purchaseMonth:'',
        totalStock:''
      }
    }
  },
  created(){
   
  },
  mounted () { 
     this.getData();
  },
  filters: {
     
  },
  activated (){

  },
  watch:{
   
  },
  methods: {
    getData(){
      api.entirety.getData({},res=>{
        console.log(res.result)
        this.pageData = res.result;
      })
    },
  }
}
</script>
<style lang="less" scoped>
.row-box{
  background: #fff;
  width: 7.10rem;
  border-radius: .15rem;
  margin: .20rem auto;
  box-shadow: 2px 2px 43px 0px rgba(36, 36, 36, 0.05);
}
.kucun-box{
  display: flex;
  height: 0.88rem;
  width: 7.10rem;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.24rem;
  background: #fff; 
  .kuncun-text{
    font-weight: bold;
  }
  .kuncun-num-box{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.index{
  min-height: 100vh;
  background: #f7f7f7;
}
.flex1{
  flex: 1;
}
.h-secoed-line{
  background: #FCCC34;
} 
.top30{
  margin-top: .30rem;
}
.h-card{
    width: 7.10rem; 
    margin: 0.09rem auto 0;
    border-radius: 0.15rem;
    background: #FABE00; 
    box-shadow: 2px 2px 43px 0px rgba(36, 36, 36, 0.05);
    overflow: hidden;
    .h-first-line{
        padding: 0.40rem 0 0.36rem;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;        
        .line-item{
            width: 50%;
            text-align: center;
            .line-title{
                line-height: 30px;
                margin-top: 0.17rem;
                color: #fff; 
            }
            .line-data{
                color: #fff;
                font-size:0.42rem;
            }
        }
    }
    .h-secoed-line{
        height: 0.73rem; 
        display: flex;
        justify-content: space-between;
        align-items: center; 
        padding: 0 0.28rem;
        .line-title{
          color: #fff;
          
        }
        .second-num{
            margin-left: 12px;
            color: #fff;
        }
        .isclick{
            border-color: #fff;
        }
        &:active{
            opacity: .7;
        }
    }
  }
  .jb-box{
    width: 7.10rem;
    background: #FFFFFF;
    box-shadow: 0.02rem 0.02rem 0.43rem 0 rgba(36, 36, 36, 0.05);
    border-radius: 0.15rem;
    padding: 0.28rem;
    margin: 0 auto;
    .bulletin-title{
      font-size: 0.32rem;
      font-weight: bold;
      line-height: 0.32rem;
    }
    .data-box{
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.32rem;
      .data-item{
        width: 50%;
        text-align: center;
        .data-item-title{
          color: #999; 
          margin-top: 0.18rem;
          .strong{
            font-weight: bold;
            color: #FABE00;
          }
        }
        .data-item-num{
          font-size: 0.42rem;
          font-weight: bold; 
          .symbol{
            font-weight: 400;
            font-size: .28rem; 
          }
        }
      }
    }

  }
</style>
